<template>
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        router
        active-text-color="#ffd04b"
        background-color="#79bbff"
        text-color="#fff"
      >
      <template v-for="(item,index) in asideMenus" :key="index">
        <el-sub-menu v-if="item.child && item.child.length > 0" :index="item.name">
          <template #title>
              <el-icon>
                  <component :is="item.icon" class="icons"></component>
              </el-icon>
              <span>{{ item.label }}</span>
          </template>
          <el-menu-item v-for="(item2,index2) in item.child" :key="index2" :index="item2.name">
              {{ item2.label }}
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item v-else :index="item.name">
            <el-icon>
                <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.label }}</span>
        </el-menu-item>
      </template>
    </el-menu>
</template>
  
  <script setup>

  import { useStore } from 'vuex'
  import { computed,ref,reactive } from 'vue'

  const props = defineProps({
    isCollapse:Boolean
  })

  const store = useStore()

  const asideMenus = computed(() => {    
    return store.state.menus
  })
  


  </script>
  
  <style scoped>
    .el-menu{
      height: 100%;
    }
  </style>
  